<template>
  <div class="dashboard-container">
    <div class="bgc">
      <div
        class="dashboard-text"
        style="
          border-bottom: 1px solid #fff;
          display: flex;
          justify-content: space-between;
          align-items: center;
          box-sizing: border-box;
          padding: 0 140px;
        "
      >
        <div
          style="
            color: #fff;
            font-weight: 500;
            font-size: 24px;
            box-sizing: border-box;
            padding-left: 20px;
          "
        >
          当前人员信息
        </div>
        <div
          class="tianjia"
          style="
            width: 80px;
            cursor: pointer;
            height: 30px;
            line-height: 30px;
            font-size: 16px;
            text-align: center;
            align-items: center;
            border: 1px solid #fff;
            border-radius: 5px;
            color: #fff;
          "
        >
          添加
        </div>
      </div>
      <div v-if="vstype == true" class="pop">
        <el-tree
          ref="tree"
          :data="data"
          show-checkbox
          default-expand-all
          node-key="node_id"
          highlight-current
          :default-checked-keys="nodeIds"
          :props="defaultProps"
          :get-checked-keys="getCheckedKeys"
          @check="handleNodeClick"
        />
        <div style="width: 100%">
          <el-button
            type="primary"
            plain
            style="margin-left: 43%; margin-top: 40px"
            @click="submitForm()"
          >提交</el-button>
        </div>
      </div>
      <div class="lists">
        <el-table
          class="box"
          :data="tableData"
          :highlight-current-row="false"
          :row-class-name="tableRowClassName"
          :default-sort="{ prop: 'date', order: 'descending' }"
          :height="600"
        >
          <el-table-column prop="id" label="ID" sortable />
          <el-table-column prop="nickname" label="姓名" />
          <el-table-column prop="username" label="昵称" />
          <el-table-column prop="avatar" label="头像">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleAdd(scope.$index, scope.row)"
              >添加权限</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          class="mt"
          layout="prev, pager, next"
          :total="total"
          :page-size="page - size"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { personList, permission, setPermission } from '@/api/user'
export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters(['name']),
    ...mapGetters(['currentProjectId'])
  },
  data() {
    return {
      defaultProps: {
        children: 'son',
        label: 'node_name'
      },
      tableData: [],
      page: '',
      page_size: '10',
      total: 0,
      vstype: false,
      item: {},
      data: [],
      nodeIds: [],
      getCheckedKeys: []
    }
  },
  watch: {
    currentProjectId(newValue, oldValue) {
      if (newValue !== oldValue) {
        console.log(newValue, oldValue)
      }
    },
    getCheckedKeys(newValue, oldValue) {
      console.log(newValue, oldValue)
    }
  },
  created() {
    this.getList()
  },
  methods: {
    submitForm() {
      setPermission({ permission_ids: this.nodeIds, admin_id: this.item.id }).then(res => {
        // console.log(res);
        if (res.code === 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.vstype = false
        }
      })
    },
    handleNodeClick(data1, data2) {
      console.log(data1, data2)
      this.nodeIds = data2.checkedKeys
    },
    handleAdd(index, item) {
      console.log(item)
      this.vstype = true
      this.item = item
      // console.log(this.item, ' this.item')

      permission(item.id).then(res => {
        if (res.code === 200) {
          this.data = res.data.AllMenu
          this.nodeIds = res.data.nodeIds
        }
      })
    },
    handleEdit(index, item) {
      this.$router.push({
        path: 'userinfo',
        query: { item: JSON.stringify(item) }
      })
    },
    getList() {
      personList({}).then(res => {
        console.log(res, '------')
        if (res.code === 200) {
          this.tableData = res.data.list
          this.page = res.data.page
          this.page_size = res.data.page_size
          this.total = res.data.total
        }
      })
    }
  }
}
</script>

  <style lang="scss" scoped>
.bgc {
  width: 100%;
  height: 80vh;
  border: 1px solid rgb(101, 166, 231);
  // background-color: red;
  //   width: 400px;
  //  height: 300px;
  //  background-color: #222 !important;
  //  border-radius: 10px;
  //  display: flex;
  //  align-items: center;
  //  justify-content: center;
  //  font-size: 20px;
  //  color: #fff;
  //  font-weight: 800;
  //  position: relative;
  //  z-index: 20;
  // background: url('../../views/images/编组-3-20240612172302722_副本.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  // background-color: red;
}
::v-deep .el-table th {
  background-color: transparent !important;
}
::v-deep .el-table {
  background-color: transparent !important;
  color: #fff !important;
  font-weight: 500;
}
::v-deep .el-table__row:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}
::v-deep.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba(255, 255, 255, 0.05) !important;
}
::v-deep .el-table tr {
  background-color: transparent !important;
}
::v-deep .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}
// ::v-deep .el-table::before {
//   //去除底部白线
//   left: 0;
//   bottom: 0;
//   width: 100%;
//   height: 0px;
// }
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.pop {
  background: url(../images/编组-3-20240612172302722_副本.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 500px;
  position: absolute;
  top: 30%;
  left: 50%;
  background-color: #122145;
  transform: translate(-50%);
  // background-color: red;
  z-index: 9999;
  padding: 40px;
}
.mt {
  margin: 0 auto;
  margin-top: 20px;
  text-align: center;
}
::v-deep .el-tree-node:focus > .el-tree-node__content {
  background-color: #ccc !important;
}
::v-deep .el-tree-node__content:hover {
  background-color: #ccc !important;
}
::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: #ccc !important;
}
::v-deep .el-pagination.is-background .el-pager li {
  background-color: transparent !important;
  border: 1px solid #fff;
  color: #fff;
}
::v-deep .el-tree {
  background: transparent !important;
  color: #fff !important;
}
::v-deep .el-pagination.is-background .btn-prev {
  background-color: transparent !important;
  color: #fff !important;
  border: 1px solid #fff !important;
}
::v-deep.el-pagination.is-background .btn-next {
  background-color: transparent !important;
  color: #fff !important;
  border: 1px solid #fff !important;
}
</style>
